<template>
    <div class="common-card" :class="[themeType]">
        <public-title title="主诉分类" :themeType="themeType">
            <template #right><span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span> </template>
        </public-title>
        <div class="zc-inner">
            <div class="title">
                <div class="type-all">
                    <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
                        <a-select-option value="全部数据">全部数据</a-select-option>
                    </a-select>
                </div>
                <div class="type-check">
                    <span
                        :class="[sexIndex === index ? 'select' : 'unSelect', themeType]"
                        v-for="(item, index) in sexType"
                        :key="index"
                        @click="handleSelect(index, item.value)"
                        >{{ item.name }}</span
                    >
                </div>
            </div>
            <div class="line-chart" ref="chiefChart"></div>
            <a-spin :spinning="spinning" class="spin"></a-spin>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import * as echarts from 'echarts';
    import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
    import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const props = defineProps({
        refreshState: {
            type: Boolean,
        },
    });
    const emit = defineEmits(['viewDetail']);
    const { themeType } = useTheme();
    const { setSession, getSession } = useSession();
    const { LEFT_KEY2 } = caching;
    const { setSpin, spinning } = useSpin();

    const sexIndex = ref(0);
    const sexVal = ref('');
    const chiefChart = ref<HTMLElement>();

    const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
    const selectValue = ref('all');

    function handleSelect(index: number, val: string) {
        sexIndex.value = index;
        sexVal.value = val;
    }

    onMounted(() => {
        init();
    });

    function init() {
        getDepartOption();
        getList();
    }

    async function getDepartOption() {
        const { code, result } = await getDepart({});
        if (code == 200) {
            const arr = result?.map((item) => ({ ...item, label: item?.departName, value: item?.orgCode }));
            selectOptions.value = [{ label: '全部数据', value: 'all' }, ...arr];
        }
    }

    async function getList() {
        setSpin(true);
        try {
            const searchParams = {
                sex: sexVal.value,
                depart: selectValue.value == 'all' ? '' : selectValue.value,
            };
            const { code, result } = (await complaint(searchParams)) || {};
            setSpin(false);
            if (code != 200) {
                return;
            }
            if (Array.isArray(result) && result.length > 0) {
                const xData = result.map((item) => item.name);
                const yData = result.map((item) => item.count);
                setSession(LEFT_KEY2, JSON.stringify({ xData, yData }));
                initChart(xData, yData);
            } else {
                EmptyChart();
            }
        } catch {
            setSpin(false);
            const { xData, yData } = getSession(LEFT_KEY2) ? JSON.parse(getSession(LEFT_KEY2)) : {};
            initChart(xData, yData);
        }
    }

    watch([selectValue, sexIndex, () => props.refreshState], () => {
        getList();
    });

    function EmptyChart() {
        initChart([], []);
    }

    function initChart(xData, ydata) {
        let myChart = echarts.init(chiefChart.value);
        let options = barOption(xData, ydata, themeType.value);
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }

    /**
     * 查看详情
     */
    function viewDetail() {
        emit('viewDetail');
    }
</script>
<style scoped lang="less">
    .right-text {
        font-weight: 100;
        cursor: pointer;
        margin-right: 3px;
        font-size: 18px;
    }

    .right-text.light {
        color: #667ecc;
    }

    .right-text:hover {
        color: #129bff;
    }

    .zc-inner {
        position: relative;
        width: 100%;
        height: calc(100% - 40px);

        .spin {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .title {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2% 0;

            .type-check {
                color: #ffffff;
                display: flex;
                justify-content: space-around;

                span {
                    width: 50px;
                    cursor: pointer;
                    font-size: 16px;
                }
            }

            .type-all {
                color: #ffffff;
                margin-right: 10px;

                .type-select {
                    width: 120px;
                    color: #008cff;
                }
            }
        }

        .line-chart {
            margin: 0 auto;
            width: 96%;
            height: 80%;
        }
    }
</style>
